<template>
    <div class="GroupListBox">
        <span class="pageName">群组管理 > 群组列表</span>

        <!-- 搜索框 -->
        <div class="searchBox">
            <div class="searchInp">
                <label for="groupID">
                    群聊ID：
                </label>
                <el-input v-model="groupID" placeholder="请输入群聊ID" name="groupID" class="inp"></el-input>

                <label for="groupName">
                    群聊名称：
                </label>
                <el-input v-model="groupName" placeholder="请输入群聊名称" name="groupName" class="inp"></el-input>

                <!-- select选择框 -->
                <label for="limitNum">
                    人数上限：
                </label>
                <el-select v-model="limitNum" slot="prepend" placeholder="全部" name="limitNum" class="option">
                    <!-- 循环渲染option的每一项 -->
                    <el-option v-for="optionArr in limitNumArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>
                <label for="addLimit">
                    加入限制：
                </label>
                <el-select v-model="addLimit" slot="prepend" placeholder="全部" name="addLimit" class="option">
                    <!-- 循环渲染option的每一项 -->
                    <el-option v-for="optionArr in addLimitArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>
                <label for="select">
                    状态：
                </label>
                <el-select v-model="selectValue" slot="prepend" placeholder="全部" name="select" class="option">
                    <!-- 循环渲染option的每一项 -->
                    <el-option v-for="optionArr in selectOptionArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>

                <!-- 时间 -->
                <div>
                    <label for="date">
                        最近消息时间：
                    </label>
                    <el-date-picker v-model="msgDate" type="daterange" align="right" unlink-panels range-separator="~"
                        start-placeholder="2015-10-02" :end-placeholder="endDate" :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd" class="dateInp">
                    </el-date-picker>
                    <label for="createDate">
                        创建时间：
                    </label>
                    <el-date-picker v-model="createDate" type="daterange" align="right" unlink-panels
                        range-separator="~" start-placeholder="2015-10-02" :end-placeholder="endDate"
                        :picker-options="pickerOptions" value-format="yyyy-MM-dd" class="dateInp">
                    </el-date-picker>
                </div>


                <el-button type="primary" @click="searchGroup">搜索</el-button>

                <!-- 表格内容删除 -->
                <div class="tableBtn">

                    <!-- 删除 -->
                    <el-button type="info" @click="delGroup" :plain="true">删除</el-button>
                </div>
            </div>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
            <el-table ref="multipleTable" :data="groupList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                border @selection-change="handleSelectionChange"
                style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;"
                :header-cell-style="{ background: '#015478', color: '#fff' }">
                <el-table-column type="selection" width="50px" align="center">
                </el-table-column>
                <el-table-column prop="groupId" label="群聊ID" align="center">
                </el-table-column>
                <el-table-column prop="groupName" label="群聊名称" align="center">
                </el-table-column>
                <el-table-column prop="groupNum" label="群聊成员" align="center">
                </el-table-column>
                <el-table-column prop="online" label="当前在线" align="center">
                </el-table-column>
                <el-table-column prop="msgNum" label="消息总数" align="center">
                </el-table-column>
                <el-table-column prop="msgDate" label="最近消息时间" align="center" width="140px">
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间" align="center" width="140px">
                </el-table-column>
                <el-table-column prop="limitNum" label="人数上限" align="center">
                </el-table-column>
                <el-table-column prop="price" label="收费价格" align="center">
                </el-table-column>
                <el-table-column prop="addLimit" label="加入限制" align="center">
                </el-table-column>
                <el-table-column prop="mode" label="状态" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="180px">
                    <template slot-scope="scope">
                        <el-button @click="freeze(scope.row)" type="text" style="color: #015478;font-size: 14px">{{
                            scope.row.operate
                        }}</el-button>
                        <el-button @click="disband(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">{{ scope.row.disband }}</el-button>
                        <!-- <el-button @click="view(scope.row)" type="text" style="color: #015478;font-size: 14px">查看聊天记录</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination :tableData="groupList" @sizeChange="sizeChange" @currentChange="currentChange"></pagination>
        </div>
    </div>
</template>

<script>

import pagination from '@/components/pagination/pagination.vue';

export default {
    name: 'GroupList',
    components: {
        pagination
    },
    data() {
        return {
            groupList: [],
            currentPage: 1, // 当前页码
            total: '', // 总条数
            pageSize: 8, // 每页的数据条数

            // 输入框内容
            groupID: '',
            groupName: '',
            limitNum: '',
            addLimit: '',
            selectValue: '',
            msgDate: '',
            createDate: '',



            // 选中内容
            multipleSelection: [],
            delGroupId: [],

            limitNumArr: [
                { id: 0, content: '全部' },
                { id: 1, content: '10-100' },
                { id: 2, content: '100-200' },
                { id: 3, content: '200-300' },
                { id: 4, content: '300-400' },
                { id: 5, content: '400-500' },
            ],
            addLimitArr: [
                { id: 6, content: '全部' },
                { id: 7, content: 'VIP1' },
                { id: 8, content: 'VIP2' },
                { id: 9, content: 'VIP3' },
                { id: 10, content: 'VIP4' },
                { id: 11, content: 'VIP5' },
            ],

            selectOptionArr: [
                { id: 12, content: '全部' },
                { id: 13, content: '正常' },
                { id: 14, content: '已冻结' },
                { id: 15, content: '已解散' }
            ],
            // 设置默认显示时间
            endDate: '',
            // 时间输入框快捷选项
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                // 设置可选时间范围
                disabledDate: (time) => {
                    return time.getTime() <= new Date('2015-10-01').getTime() || time.getTime() > Date.now() - 8.64e6
                }
            }
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        sizeChange(current, count) {
            this.currentPage = current;
            this.pageSize = count;
        },
        currentChange(current) {
            this.currentPage = current
        },
        // 获取当前日期
        handleTimeNew() {
            let now = new Date();
            let year = now.getFullYear();
            let month = (now.getMonth() + 1).toString().padStart(2, 0);
            let day = now.getDate().toString().padStart(2, 0);
            return year + '-' + month + '-' + day
        },


        // 搜索
        searchGroup() {
            this.$axios({
                method: 'get',
                url: this.$api.group.groupListSearch,
                params: {
                    groupId: this.groupID,
                    groupName: this.groupName,
                    limitNum: this.limitNum,
                    addLimit: this.addLimit,
                    selectValue: this.selectValue,
                    msgDate: this.msgDate,
                    createDate: this.createDate,
                }
            })
                .then(res => {
                    this.groupList = res.data
                    this.groupID = '',
                        this.groupName = '',
                        this.limitNum = this.limitNumArr[0].content,
                        this.addLimit = this.addLimitArr[0].content,
                        this.selectValue = this.selectOptionArr[0].content,
                        this.msgDate = '',
                        this.createDate = ''

                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 批量删除
        delGroup() {
            if (this.multipleSelection != '') {
                this.multipleSelection.forEach(item => {
                    this.delGroupId.push(item.groupId)
                })
                this.$confirm('是否继续?', '批量删除群组信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$axios({
                        method: 'get',
                        url: this.$api.group.delSelectionGroup,
                        params: {
                            delSelectionData: this.delGroupId
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$axios.get(this.$api.group.groupList)
                                    .then(res => {
                                        this.groupList = res.data;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                                this.multipleSelection = []
                                this.delGroupId = []
                            } else {
                                console.log('未选中');
                            }

                        })
                        .catch(err => {
                            console.log(err);
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            } else {
                this.$message({
                    showClose: true,
                    message: '请选择需要删除的信息！',
                    type: 'warning'
                })
            }
        },
        // 冻结当前选中内容
        freeze(row) {
            this.$axios({
                method: 'get',
                url: this.$api.group.groupListMode,
                params: {
                    groupId: row.groupId,
                    mode: row.mode,
                    operate: row.operate
                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.group.groupList)
                            .then(res => {
                                this.groupList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 解散
        disband(row) {
            console.log(row);
            this.$axios({
                method: 'get',
                url: this.$api.group.disbandGroupList,
                params: {
                    groupId: row.groupId,
                    mode: row.mode,
                    operate: row.operate,
                    disband:row.disband
                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.group.groupList)
                            .then(res => {
                                this.groupList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // view(row) {
        //     console.log(row);
        // },



    },
    created() {
        this.limitNum = this.limitNumArr[0].content,
            this.addLimit = this.addLimitArr[0].content,
            this.selectValue = this.selectOptionArr[0].content,
            this.endDate = this.handleTimeNew()

        this.$axios.get(this.$api.group.groupList)
            .then(res => {
                this.groupList = res.data;
            })
            .catch(err => {
                console.log(err);
            })
    },
}
</script>

<style scoped>
.GroupListBox {
    display: flex;
    flex-direction: column;
}

.searchBox {
    display: flex;
    align-items: center;
}

.inp {
    width: 150px;
}

.searchInp {
    height: 100px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    flex-wrap: wrap;
}

.option {
    width: 100px;
}

.dateInp {
    width: 224px;
}

button {
    height: 40px;
    margin-left: 10px;
}

.tableBtn {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}
</style>